前言

這次內容會針對剛成為 React developer 的新手，提供一些提可以升技能的方向，有多少朋友遇到以下的情況呢？

通常在一系列的教學文章或是速成班內容後，懂得基本的html/css/js，React 基本 hook function 的使用，基礎 router 切分管理，可能還有一些其他的套件應用，就開始踩坑了。

確實也都是這樣，如果很認真照著前端的Roadmap去學習的話，最快也得六個月才出師，前提是在這之前你的熱情沒有被消磨殆盡。

記得之前有在前端的社群裡聊到幾種面向的前端工程師，這就像以前玩遊戲一樣的概念，就我個人的觀察，前端工程師也分以下幾種：

1. 切版魔術師：css 大神領域，沒有他切不出來的版，只要圖能畫出來就沒有辦不到的問題。
2. 資料傳輸接線生：處理所有的請求模式(rest, graphQL, trpc…)，就沒有他不會整的請求資料。
3. 狀態管理師：熟悉處理個組件或頁面的state，能有條有理的管理整個專案的所有狀態。
4. 包板工具人：切分打包工具完成後的檔案結構，熟悉各個打包工具的設定，能做出對應調整。
5. 效能調節師：熟悉渲染模式與框架的生命週期，調節各種失序的💩code(通常都很資深了啦)。
6. 積木製作師：框架最重要的就是模組化前端的組件，擅長產出高效應用的模塊化組件。

當然，也有可能更多是跑去點了一些後端技能樹的工程師，多半被老闆或是環境所逼，台灣人天生被動技能(奴性+)，所以前後都會一點是蠻常見的，當然這要受到不少特定因素啦！也是有首抽SSR的，這樣比較不容易走歪，除非他自己覺得走錯路。

如果要二轉，也就是 junior → senior 其實每間公司的標準也不相同，單就上述幾項能力有一定程度的掌握，那麼要如何增進以上的實力，會是我接下來分享的主軸。

• hook深入理解： 作為一名 React 的開發者，你必然需要深入了解自己使用的工具，你會深入理解 React 發展史與幾個常用 hook function 的實作細節和誤區。

• 渲染機制理解： 同時作為一名前端工程師，你也必須了解一些渲染機制和渲染效能提升的方法，有了這些概念之後，在學習 Nextjs 框架的同時會更快進入狀況。

• Design pattern的應用： 在使用框架時，要如何參考Design pattern 來達到管理或效能優化，這也是會在此系列講解的部分；同時，也會分享工作上遇到新手常踩的坑，及如何有效解決，並且建立正確的觀念，這是很重要的事。

我身為一個 React 的開發者，在學習的路上踩過許多大大小小的坑，從 javascript 的基礎、side effect 的問題、rerender 的問題…，深入討論一些 React 的運作機制及可以改善的作法，會是這個系列的主軸。

結語

那在這系列的課程之後，希望大家都能成為一名自己心中嚮往的前端工程師，同時不要忘記你該追求的事情和眼界不應該只專注在 React 上面，參考不同框架的作法永遠是提升自己認知的最短路徑。

學習新版本或新技術是為了未來五年的就業市場做準備
學習穩定版本或用戶龐大的技術是為了目前的就業市場做準備
學習以前過時的老舊技術可以為你之後的創新多點素材

該往哪個方向努力，希望在這系列的課程之後能更有方向！

給全新手的大禮包

React基本Hook教學